<template>
<uni-shadow-root class="cax-cax"><canvas class="cax-canvas" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" :canvas-id="id" :style="'border: 1px solid;width: '+(width)+'px; height: '+(height)+'px;'">
    <slot></slot>
</canvas>

<canvas class="cax-canvas-hit" :canvas-id="(id)+'Hit'" style="width:1px;height:1px;display: none;"></canvas>
<canvas class="cax-canvas-measure" :canvas-id="'measure'+(index)" style="width:1px;height:1px;display: none;"></canvas></uni-shadow-root>
</template>

<script>

global['__wxVueOptions'] = {components:{}}

global['__wxRoute'] = 'cax/cax'
import cax from '../../static/js_sdk/cax.js'

Component({
    /**
     * 组件的属性列表
     */
    properties: {

        option: {
            type: Object
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        width: 0,
        height: 0,
        id: 'caxCanvas' + cax.caxCanvasId++,
        index: cax.caxCanvasId - 1
    },

    /**
     * 组件的方法列表
     */
    methods: {

        getCaxCanvasId: function () {
            return this.data.id
        },

        touchStart: function (evt) {
            this.stage.touchStartHandler(evt)
            this.stage.touchStart && this.stage.touchStart(evt)
        },

        touchMove: function (evt) {
            this.stage.touchMoveHandler(evt)
            this.stage.touchMove && this.stage.touchMove(evt)
        },

        touchEnd: function (evt) {
            this.stage.touchEndHandler(evt)
            this.stage.touchEnd && this.stage.touchEnd(evt)
        }

    }
})
export default global['__wxComponents']['cax/cax']
</script>
<style platform="mp-weixin">

</style>